<template>
  <back-btn></back-btn>
  <div id="app">
    <h2>消息 {{ num }} 条</h2>
    <h3>今年是 {{ nowYear }} 年</h3>

    <button @click="updateMsg">更新消息</button>
    <p>点击了 {{ clickBtnNum }} 下按钮</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    /* 方式一：直接传入ref对象 */
    const num = ref(1);

    /* 方式二：先声明 后传入ref对象 */
    let year = new Date().getFullYear();
    const nowYear = ref(year);

    /* 记录按钮点击次数 */
    const clickBtnNum = ref(0);

    /* 更新响应式数据的方法 */
    const updateMsg = () => {
      clickBtnNum.value += 1;
      num.value *= 2;
    };

    return {
      num,
      nowYear,
      clickBtnNum,
      updateMsg,
    };
  },
});
</script>

<style scoped></style>
